import React, { Component } from 'react'
import { withRouter } from 'react-router-dom'
import { Flex } from 'antd-mobile'
import classNames from 'classnames'

import { getCurrentCity } from '../../utils/getCurrentCity'

import styles from './index.module.scss'

class SearchHead extends Component {
  state = {
    currentCity: ''
  }
  async componentDidMount() {
    // console.log(this.props)
    const { label } = await getCurrentCity()
    this.setState({ currentCity: label })
  }

  render() {
    const currentCity = this.state.currentCity
    const { className } = this.props
    // console.log(className)
    return (
      <Flex className={classNames(styles.search, className)}>
        <Flex className={styles.searchLeft}>
          <Flex
            className={styles.searchArea}
            onClick={() => {
              this.props.history.push('/cityList')
            }}
          >
            <span>{currentCity ? currentCity : '定位中...'}</span>
            <i className="iconfont icon-arrow"></i>
          </Flex>
          <Flex
            className={styles.searchInput}
            onClick={() => {
              this.props.history.push('/search')
            }}
          >
            <i className="iconfont icon-seach"></i>
            <p>请输入小区或地址</p>
          </Flex>
        </Flex>
        <i
          className="iconfont icon-map"
          onClick={() => {
            this.props.history.push('/map')
          }}
        ></i>
      </Flex>
    )
  }
}

export default withRouter(SearchHead)
